<!-- 示例6: 自定义插槽 -->
<template>
  <Table
      :data="orders"
      :columns="columns"
      :virtualScroll="true"
  >
    <template #header-status="{ column }">
      <span style="color: blue">{{ column.title }}</span>
    </template>

    <template #cell-status="{ row }">
      <span :style="{ color: row.status === '完成' ? 'green' : 'red' }">
        {{ row.status }}
      </span>
    </template>

    <!--添加空状态-->
    <template #empty>
      <div class="empty-with-action">
        <p>您还没有创建任何项目</p>
        <button @click="createProject">立即创建</button>
      </div>
    </template>
  </Table>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟订单数据 - 增加更多数据
const orders = ref([])

// 列配置
const columns = [
  { title: '订单号', dataIndex: 'title' },
  { title: '客户', dataIndex: 'customer' },
  { title: '金额', dataIndex: 'amount',
    render: (amount) => `¥${amount.toLocaleString()}` },
  { title: '状态', dataIndex: 'status' },
  { title: '日期', dataIndex: 'date' }
]

// 创建项目方法
const createProject = () => {
  // 生成新的订单数据
  const newOrder = {
    title: `ORD${String(orders.value.length + 1).padStart(3, '0')}`,
    customer: `客户${orders.value.length + 1}`,
    amount: Math.floor(Math.random() * 10000) + 1000,
    status: Math.random() > 0.5 ? '完成' : '待付款',
    date: new Date().toISOString().split('T')[0]
  }

  // 添加到订单列表
  orders.value.push(newOrder)
}
</script>

<style scoped>
.table-container {
  padding: 20px;
}

/* 可定制的CSS变量 */
.ds-table {
  --empty-text-color: #909399;
  --empty-icon-color: #c0c4cc;
  --empty-action-color: #409eff;
}

.custom-empty {
  padding: 30px 0;
}

.custom-empty img {
  width: 120px;
  margin-bottom: 16px;
}

.custom-empty button {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--empty-action-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>